<script setup>
import { ElButton, ElMessage } from 'element-plus'
import {
    Search,
    RefreshLeft,
    CaretRight,
    CircleClose,
} from '@element-plus/icons-vue'
import { useDeviceStore } from '../stores/device'
import { useConfigStore } from '../stores/config'
import { watch } from 'vue'

const deviceStore = useDeviceStore()
const configStore = useConfigStore()

const handleCheckAll = () => {
    if (deviceStore.checkingAll) {
        deviceStore.stopCheckAll()
        return
    }
    deviceStore.checkAll()
}

watch(
    () => deviceStore.checkingAll,
    (val, oldVal) => {
        if (!val && oldVal) {
            ElMessage.success('检查完成')
        }
    }
)

watch(
    () => deviceStore.gettingScoreAll,
    (val, oldVal) => {
        if (!val && oldVal) {
            ElMessage.success('评分完成')
        }
    }
)

const handleGetScoreAll = () => {
    if (deviceStore.gettingScoreAll) {
        deviceStore.stopGetScoreAll()
        return
    }
    if (deviceStore.onlineDevices.length === 0) {
        ElMessage.warning('没有在线设备')
        return
    }
    deviceStore.getScoreAll()
}

const resetAllDevices = async () => {
    await deviceStore.resetAll()
    const { max_device_num } = configStore
    deviceStore.initDevices(max_device_num)
}
</script>

<template>
    <!-- 控制按钮 -->
    <el-button
        type="warning"
        @click="handleCheckAll"
        :icon="deviceStore.checkingAll ? CircleClose : Search"
        >{{ deviceStore.checkingAll ? '停止检查' : '检查在线设备' }}</el-button
    >
    <el-button
        type="primary"
        @click="handleGetScoreAll"
        :icon="deviceStore.gettingScoreAll ? CircleClose : CaretRight"
        >{{
            deviceStore.gettingScoreAll ? '停止获取分数' : '开始多机评分'
        }}</el-button
    >
    <el-button type="danger" :icon="RefreshLeft" @click="resetAllDevices"
        >重置所有设备</el-button
    >
</template>

<style scoped></style>
